{% extends "based/based_no_sidebar.html" %}
{% block title %}{{_('内容分类管理')}}-{% endblock %}
{% block content %}
<div id="app" >

    <div class="row osr-edit-page">
        <div class="col-md-12 osr-col-xs-12">
            <section class="osr-panel">
              <header class="panel-heading tab-bg-dark-navy-blue osr-panel-heading">
                  <strong>{{_("文集")}}</strong>
                  <a class="pull-right"
                     href="/osr-admin/own/content/writer?status={{data.ps}}&editor={{data.peditor}}&id={{data.pid}}">
                        <i class="fa fa-arrow-circle-left"></i>
                      {{_("返回")}}
                  </a>
              </header>

              <div class="panel-body">
                  <div class="text-center">

                    <div v-for="category in categorys" class="form-group">
                        <label>
                        <input name="name" type="text" class="form-control osr-input" v-model="category.name"
                          data-bv-notempty-message="{{_('不能为空')}}" placeholder="{{_('分类名称')}}" required/>
                        </label>
                        <button v-on:click="update(category._id, category.name)" class="btn-sm osr-btn btn btn-info osr-submit-btn">{{_("保存")}}</button>
                        <button v-on:click="warning_modal(null, 'del', category._id)" class="btn-sm osr-btn btn btn-danger" >{{_("删除")}}</button>
                    </div>

                    <div class="form-group">
                        <label>
                        <input name="new_name" type="text" class="form-control osr-input" v-model="new_category"
                               placeholder="{{_('分类名称')}}" data-bv-notempty-message="{{_('不能为空')}}" required/>
                        </label>
                        <button v-on:click="add()" class="btn-sm osr-btn btn btn-success osr-submit-btn">{{_("添加")}}</button>
                         <button class="btn-sm osr-btn btn btn-default disabled">{{_("删除")}}</button>
                    </div>
                 </div>
              </div>
            </section>
        </div>
    </div>
</div>
<script>
    var vue = new Vue({
      el: '#app',
      delimiters:['{[', ']}'],
      data:{
        category_types:[],
        curren_type:null,
        categorys:[],
        new_category:"",
        single_type:false
      },
      methods: {show_btn:show_btn}
    })

    // 加载完页面执行
    $(document).ready(function(){

        var url_s = get_url_parameter();
        var type_v = get_obj_value(url_s, "type");

        if(type_v){
            vue.curren_type = [type_v, type_v];
        }
        if(vue.curren_type){
            vue.single_type = true;
        }
        get_category_type();
        get_categorys();
    })

    function show_btn(id){
        if( $("#"+id).hasClass("show") ){
            // 执行隐藏
            $("#"+id).hide().removeClass("show");
            // 其他
        }else{
            // 显示
            $("#"+id).show().addClass("show");
        }
    }
    function get_category_type(){
         var result = osrHttp("GET","/api/content/category", {action:'get_category_type'},
                                args={not_prompt:true});
         result.then(function (r) {
            vue.category_types = r.data.types;
         });

        // types keys
        var keys = get_obj_keys(vue.category_types);
        if(!vue.curren_type){
            vue.curren_type = [keys[0], vue.category_types[keys[0]]];
        }else{
            for(var i in vue.category_types) {
                if(vue.category_types[i] == vue.curren_type[1] ){
                    vue.curren_type[0] = i;
                    break;
                }
            }
        }

    }

    function get_categorys(){

        var result = osrHttp("GET","/api/content/category",
                            {type:vue.curren_type[1], action:"get_category"},
                                args={not_prompt:true});
         result.then(function (r) {
             vue.categorys = r.data.categorys;
         });
    }

    function switch_type(value){
        vue.curren_type[1] = value;
        for(var i in vue.category_types) {
                if(vue.category_types[i] == vue.curren_type[1] ){
                    vue.curren_type[0] = i;
                    break;
                }
        }

        get_categorys();
    }

    function add(){
        formValidate();
        var d = {
            name:vue.new_category,
            type:vue.curren_type[1]
        }
        // 提交数据

        var result = osrHttp("POST", "/api/content/category", d);
        result.then(function (r) {
            if (r.status=="success" && r.data.msg_type=="s"){
                get_categorys();
                vue.new_category = "";
            }
        });

    }

    function update(id, name){
        formValidate();
        var d = {
                 name:name,
                 id:id
        }
        // 提交数据
        var result = osrHttp("PUT", "/api/content/category", d);
        result.then(function (r) {
            if (r.status=="success" && r.data.msg_type=="s"){
                get_categorys();
            }
        });

    }

    function del(id){

        var d = {
                 ids:JSON.stringify([id])
        }
        // 提交数据
        var result = osrHttp("DELETE", "/api/content/category", d);
        result.then(function (r) {
            if (r.status=="success" && r.data.msg_type=="s"){
                get_categorys();
            }
        });
    }


</script>
{% endblock %}
